<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .BMap_cpyCtrl {
            display: none;
        }

        .anchorBL {
            display: none;
        }

        /**
         * 列表组样式
         */
        #table-read-card {
            position: fixed;
            bottom: 0;
            width: 50%;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .table {
            color: white;
        }

        th {
            text-align: center;
        }
    </style>
</head>
<body style="width:100%;height: 100%;margin: 0;">
<div id="main" style="width: 100%;height:100vh;">

</div>
<div id="table-read-card">
    <table class="table text-center">
        <thead>
        <tr>
            <th>刷卡人</th>
            <th>刷卡时间</th>
        </tr>
        </thead>

        <tbody>
        <!--tr><td>张三</td><td>2015-10-10</td></tr>
        <tr><td>张四</td><td>2015-10-10</td></tr>
        <tr><td>张五</td><td>2015-10-10</td></tr>
        <tr><td>张六</td><td>2015-10-10</td></tr-->
        </tbody>
    </table>
</div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/3.8.5/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/3.8.5/extension/bmap.min.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.19.0/moment-with-locales.min.js"></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=zSrwwQpoWFZFa9Rk03iyzT2O"></script>

<script src="./js/geoCoordMap.js"></script>
<script>
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var latestReadCardTimeStamp = 0;//最后一次刷卡的时间
    var bMap;//百度地图实例
    var borderOfZhongshan = [[113.587345, 22.5138430000001], [113.582908964844, 22.5570851875], [113.573624296875, 22.521977765625], [113.569637480469, 22.4759206367188], [113.573616972656, 22.4581716132813], [113.555513945313, 22.4456740546876], [113.547345, 22.413843], [113.491790800781, 22.4093971992187], [113.480477324219, 22.3952663398438], [113.493079863281, 22.3284352851563], [113.470553007813, 22.310395734375], [113.487323027344, 22.2818679023438], [113.51107546875, 22.2628469062501], [113.481790800781, 22.2393971992188], [113.472899199219, 22.2282888007813], [113.452093535156, 22.2116310859376], [113.407345, 22.203843], [113.3857825, 22.23507346875], [113.340513945313, 22.2520119453125], [113.313260527344, 22.3297585273438], [113.278533964844, 22.382309796875], [113.247345, 22.4038430000001], [113.241209746094, 22.4639943671875], [113.214534941406, 22.511801984375], [113.177345, 22.543843], [113.17123171875, 22.5927223945313], [113.157345, 22.603843], [113.148944121094, 22.6238430000001], [113.163543730469, 22.6586037421875], [113.157345, 22.683843], [113.192010527344, 22.6758107734376], [113.20170046875, 22.6994875312501], [113.231082792969, 22.7391164375], [113.246263457031, 22.74819846875], [113.262110625, 22.7276686835938], [113.28170046875, 22.73948753125], [113.32298953125, 22.74819846875], [113.350238066406, 22.7646364570313], [113.357345, 22.773843], [113.415872832031, 22.7405690742187], [113.44197390625, 22.73847190625], [113.447345, 22.733843], [113.532655058594, 22.6716579414063], [113.531803007813, 22.6501686835938], [113.552154570313, 22.6186525703125], [113.577345, 22.603843], [113.570909453125, 22.5881789375001], [113.614908476563, 22.5765700507813], [113.603170195313, 22.5180178046875], [113.587345, 22.5138430000001][113.587345, 22.5138430000001], [113.582908964844, 22.5570851875], [113.573624296875, 22.521977765625], [113.569637480469, 22.4759206367188], [113.573616972656, 22.4581716132813], [113.555513945313, 22.4456740546876], [113.547345, 22.413843], [113.491790800781, 22.4093971992187], [113.480477324219, 22.3952663398438], [113.493079863281, 22.3284352851563], [113.470553007813, 22.310395734375], [113.487323027344, 22.2818679023438], [113.51107546875, 22.2628469062501], [113.481790800781, 22.2393971992188], [113.472899199219, 22.2282888007813], [113.452093535156, 22.2116310859376], [113.407345, 22.203843], [113.3857825, 22.23507346875], [113.340513945313, 22.2520119453125], [113.313260527344, 22.3297585273438], [113.278533964844, 22.382309796875], [113.247345, 22.4038430000001], [113.241209746094, 22.4639943671875], [113.214534941406, 22.511801984375], [113.177345, 22.543843], [113.17123171875, 22.5927223945313], [113.157345, 22.603843], [113.148944121094, 22.6238430000001], [113.163543730469, 22.6586037421875], [113.157345, 22.683843], [113.192010527344, 22.6758107734376], [113.20170046875, 22.6994875312501], [113.231082792969, 22.7391164375], [113.246263457031, 22.74819846875], [113.262110625, 22.7276686835938], [113.28170046875, 22.73948753125], [113.32298953125, 22.74819846875], [113.350238066406, 22.7646364570313], [113.357345, 22.773843], [113.415872832031, 22.7405690742187], [113.44197390625, 22.73847190625], [113.447345, 22.733843], [113.532655058594, 22.6716579414063], [113.531803007813, 22.6501686835938], [113.552154570313, 22.6186525703125], [113.577345, 22.603843], [113.570909453125, 22.5881789375001], [113.614908476563, 22.5765700507813], [113.603170195313, 22.5180178046875], [113.587345, 22.5138430000001]];

    //初始化百度地图图表实例，但是还没有数据
    (function initMapChart() {
        myChart.setOption({
            tooltip: {
                trigger: 'item',
                formatter: params => {
//                console.log(params)
                    return params.name + ": " + params.value[2] + '台'
                }
            },
            bmap: {
                center: [102.13066322374, 37.240018034923],
                zoom: 5,
                roam: true,
                mapStyle: {
                    styleJson: [
                        {
                            'featureType': 'land',     //调整土地颜色
                            'elementType': 'geometry',
                            'stylers': {
                                'color': '#081734'
                            }
                        },
                        {
                            'featureType': 'building',   //调整建筑物颜色
                            'elementType': 'geometry',
                            'stylers': {
                                'color': '#04406F'
                            }
                        },
                        {
                            'featureType': 'building',   //调整建筑物标签是否可视
                            'elementType': 'labels',
                            'stylers': {
                                'visibility': 'off'
                            }
                        },
                        {
                            'featureType': 'highway',     //调整高速道路颜色
                            'elementType': 'geometry',
                            'stylers': {
                                'color': '#015B99'
                            }
                        },
                        {
                            'featureType': 'highway',    //调整高速名字是否可视
                            'elementType': 'labels',
                            'stylers': {
                                'visibility': 'off'
                            }
                        },
                        {
                            'featureType': 'arterial',   //调整一些干道颜色
                            'elementType': 'geometry',
                            'stylers': {
                                'color': '#003051'
                            }
                        },
                        {
                            'featureType': 'arterial',
                            'elementType': 'labels',
                            'stylers': {
                                'visibility': 'off'
                            }
                        },
                        {
                            'featureType': 'green',
                            'elementType': 'geometry',
                            'stylers': {
                                'visibility': 'off'
                            }
                        },
                        {
                            'featureType': 'water',
                            'elementType': 'geometry',
                            'stylers': {
                                'color': '#044161'
                            }
                        },
                        {
                            'featureType': 'subway',    //调整地铁颜色
                            'elementType': 'geometry.stroke',
                            'stylers': {
                                'color': '#003051'
                            }
                        },
                        {
                            'featureType': 'subway',
                            'elementType': 'labels',
                            'stylers': {
                                'visibility': 'off'
                            }
                        },
                        {
                            'featureType': 'railway',
                            'elementType': 'geometry',
                            'stylers': {
                                'visibility': 'off'
                            }
                        },
                        {
                            'featureType': 'railway',
                            'elementType': 'labels',
                            'stylers': {
                                'visibility': 'off'
                            }
                        },
                        {
                            'featureType': 'all',     //调整所有的标签的边缘颜色
                            'elementType': 'labels.text.stroke',
                            'stylers': {
                                'color': '#313131'
                            }
                        },
                        {
                            'featureType': 'all',     //调整所有标签的填充颜色
                            'elementType': 'labels.text.fill',
                            'stylers': {
                                'color': '#FFFFFF'
                            }
                        },
                        {
                            'featureType': 'manmade',
                            'elementType': 'geometry',
                            'stylers': {
                                'visibility': 'off'
                            }
                        },
                        {
                            'featureType': 'manmade',
                            'elementType': 'labels',
                            'stylers': {
                                'visibility': 'off'
                            }
                        },
                        {
                            'featureType': 'local',
                            'elementType': 'geometry',
                            'stylers': {
                                'visibility': 'off'
                            }
                        },
                        {
                            'featureType': 'local',
                            'elementType': 'labels',
                            'stylers': {
                                'visibility': 'off'
                            }
                        },
                        {
                            'featureType': 'subway',
                            'elementType': 'geometry',
                            'stylers': {
                                'lightness': -65
                            }
                        },
                        {
                            'featureType': 'railway',
                            'elementType': 'all',
                            'stylers': {
                                'lightness': -40
                            }
                        },
                        {
                            'featureType': 'boundary',
                            'elementType': 'geometry',
                            'stylers': {
                                'color': '#8b8787',
                                'weight': '1',
                                'lightness': -29
                            }
                        }]
                }
            },
            series: [{
                type: 'scatter',
                coordinateSystem: 'bmap',
                data: [
                    //格式: {name: '广州', value: [80, 30, 99]}
                ],
                label: {
                    normal: {
                        show: false
                    },
                },
                itemStyle: {
                    normal: {
                        color: '#98FB98'
                    }
                }
            }, {
                type: 'effectScatter',
                coordinateSystem: 'bmap',
                data: [
                    //格式: {name: '广州', value: [80, 30, 99]}
                ],
                symbolSize: 20,
                label: {
                    normal: {
                        show: false
                    },
                },
                rippleEffect: {
                    period: 3,
                    scale: 4,
                    brushType: 'stroke'
//                    brushType: 'fill'
                },
            },]


        })

        bMap = myChart.getModel().getComponent('bmap').getBMap();
        bMap.addControl(new BMap.NavigationControl());
        bMap.centerAndZoom(new BMap.Point(113.38,22.52),11)
    }());

    //实时更新左下角刷卡表格数据
    (function updateReadCardTableData() {
        function reRequestLatest() {
            $.ajax({
                url: '/event/readCard/latest',
                method: 'POST',
                data: {
                    latestTime: latestReadCardTimeStamp
                }
            }).then(res => {
                var results = res.resultData.slice(0, 5)

                for (var i = results.length - 1; i >= 0; i--) {
                    var item = results[i]
                    $('#table-read-card tbody tr').last().remove()
                    $('#table-read-card tbody').prepend(
                        '<tr>' +
                        '<td>' + item.ownerName + '</td>' +
                        '<td>' + moment(item.time).format("YYYY-MM-DD HH:mm:ss") + '</td>' +
                        '</tr>'
                    )
                }


                //将第一个(最新的)刷卡数据时间保存到全局变量
                latestReadCardTimeStamp = results[0].time || latestReadCardTimeStamp

                //请求成功之后再触发请求
                setTimeout(reRequestLatest, 5000)
            })
        }

        $.ajax({
            url: '/event/readCard/recent',
            method: 'POST',
        }).then(res => {
            console.log(res)

            for (var i = 0; i < 5; i++) {
                var item = res.resultData[i]

                var name = item != null ? item.ownerName : "空"
                var time = item != null ? moment(item.time).format("YYYY-MM-DD HH:mm:ss") : ""
                console.log("name: " + name + " time: " + time)

                $('#table-read-card tbody').append(
                    '<tr>' +
                    '<td>' + name + '</td>' +
                    '<td>' + time + '</td>' +
                    '</tr>'
                )
            }

            //将第一个(最新的)刷卡数据时间保存到全局变量
            latestReadCardTimeStamp = res.resultData[0].time || latestReadCardTimeStamp

            //隔5秒后请求latest
            setTimeout(reRequestLatest, 5000)
        })

    }());

    //请求地图上终端数量并更新地图显示
    (function requestTerminalCountData() {
        $.ajax({
            url: '/terminal/countSubrange',
            data: {
                prefixId: '8644' //广东省
            }
        }).then(res => {

            //拥有大于一台终端的城市数据
            var rippleDatas = formatData(res, val => {
                return val > 0
            })

            //其他城市数据
            var nonRippledatas = formatData(res, val => {
                return val < 1
            })

            myChart.setOption({
                series: [{//普通散点图
                    data: nonRippledatas
                }, {//波纹动画散点图
                    data: rippleDatas
                },]
            })
        }, err => {
            alert('服务器响应出错')
        })
    }());

    (function drawPolygon() {
        var coords = borderOfZhongshan
        points = []
        for (var coord of coords) {
            if(!coord)
                continue
            points.push(new BMap.Point(coord[0], coord[1]))
        }
        var polygon = new BMap.Polygon(points,
            {
                strokeColor: "#98FB98", fillColor: "", strokeWeight: 5,
                strokeOpacity: 0, fillOpacity: 0,
            });
        bMap.addOverlay(polygon);
    }())

    /**
     * 自定义辅助函数
     */

    //格式化从服务器到地图图表的数据
    function formatData(datas, filter) {
        var result = []

        for (var param in datas) {
            var coord = getCoord(param.replace('市', ''))

            if (!coord)
                continue

            if (!filter(datas[param]))
                continue

            result.push({
                name: param,
                value: coord.concat(datas[param])
            })
        }

        return result
    }
</script>
</body>
</html>